<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 18:38:59
-->
<template>
<!-- 2.设置图标容器，容纳容器 -->
<!-- 如何在vue中设置dom节点 ref -->
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
// 从g2plot对象中引入折线图构造函数
import {Line} from '@antv/g2plot'
//1.引入组件库
export default {
  data(){
    return {

    }
  },
  methods:{
    // 封装图标方法
    initCharts(){
      // 创建图表实例
      // 获取dom节点   ref = 'root'
      let line = new Line(this.$refs['root'],{
        data:[
          { year: '1-5', value: 3 },
          { year: '6-10', value: 4 },
          { year: '11-15', value: 3.5 },
          { year: '16-20', value: 5 },
          { year: '21-25', value: 4.9 },
          { year: '26-30', value: 4.9 }
        ],
        xField:'year',
        yField:'value',
        color:'cyan',
           tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        xAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 13,
            },
          },
        },
        yAxis: {
          grid: {
            line: {
              style: {
                lineDash: [2, 3],
                strokeOpacity: 0.2,
              },
            },
          },
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },    
      })
      // 4.渲染
      line.render()
    }
  },
  // 在onMounted之后执行，页面dom节点创建完毕，并且挂载完毕
  mounted(){
    this.initCharts();
    
  },
  // 页面dom节点创建完毕，但是没有挂载,获取不到dom
  // created(){}
}
</script>

<style lang="scss">

</style>